<template>
  <div class="selection-wrap flex sp">
    <div
      class="select-item flex"
      v-for="(item, index) in data"
      :key="index + 'select'"
      @click="handClick(item)"
    >
      <i
        :style="
          'background:' +
          (select === 'All' ? item.color : select === item.label ? item.color : '#666')
        "
      />
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "version-selection",
  data() {
    return {
      select: "All",
      data: [
        // {
        //   label: "Matrix",
        //   color: "rgb(255,160,131)"
        // },
        {
          label: "Metro",
          color: "rgb(255,160,131)"
        },
        {
          label: "Enterprise",
          color: "rgb(182,248,175)"
        },
        {
          label: "Lite",
          color: "rgb(186,222,254)"
        }
      ]
    };
  },
  methods: {
    choseEdition(edition = "All") {
      this.select = edition;
    },
    handClick(item) {
      if (this.select !== item.label) {
        this.select = item.label;
      } else {
        this.select = "All";
      }
    }
  }
};
</script>

<style scoped>
.selection-wrap {
  position: absolute;
  top: 5.02vw;
  left: 50%;
  z-index: 1;
  display: flex;
  width: 22.3vw;
  height: 2vw;
  transform: translate3d(-50%, 0, 0);
}

.select-item {
  flex: 1;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-weight: 600;
  font-size: 0.758vw;
}

.select-item i {
  width: 0.5vw;
  height: 0.5vw;
  margin: 5px 0.3vw 0 0;
  overflow: hidden;
  border-radius: 100%;
  transition: 300ms;
}
</style>
